<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="600px"
    :before-close="handleClose"
  >
    <div class="batch-operation-dialog">
      <!-- 操作概览 -->
      <div class="operation-overview">
        <el-alert
          :title="`即将对 ${selectedComments.length} 条评论执行${operationText}操作`"
          type="warning"
          :closable="false"
          show-icon
        />
      </div>

      <!-- 选中的评论列表 -->
      <div class="selected-comments">
        <h4>选中的评论</h4>
        <div class="comment-list">
          <div
            v-for="comment in selectedComments.slice(0, 5)"
            :key="comment.id"
            class="comment-item"
          >
            <div class="comment-info">
              <span class="comment-id">ID: {{ comment.id }}</span>
              <span class="comment-user">{{ comment.userName }}</span>
              <span class="comment-content">{{
                truncateContent(comment.content)
              }}</span>
            </div>
            <el-tag :type="getStatusTagType(comment.status)" size="small">
              {{ getStatusText(comment.status) }}
            </el-tag>
          </div>
          <div v-if="selectedComments.length > 5" class="more-comments">
            还有 {{ selectedComments.length - 5 }} 条评论...
          </div>
        </div>
      </div>

      <!-- 操作参数 -->
      <div class="operation-params">
        <el-form
          ref="formRef"
          :model="operationForm"
          :rules="formRules"
          label-width="120px"
        >
          <!-- 敏感词类型 -->
          <el-form-item
            v-if="operationType === 'mark_sensitive'"
            label="敏感词类型"
            prop="sensitiveType"
          >
            <el-select
              v-model="operationForm.sensitiveType"
              placeholder="选择敏感词类型"
            >
              <el-option label="政治敏感" value="政治" />
              <el-option label="违禁词" value="违禁词" />
              <el-option label="广告" value="广告" />
              <el-option label="色情内容" value="色情" />
              <el-option label="暴力内容" value="暴力" />
            </el-select>
          </el-form-item>

          <!-- 操作备注 -->
          <el-form-item label="操作备注" prop="reason">
            <el-input
              v-model="operationForm.reason"
              type="textarea"
              :rows="2"
              placeholder="请输入操作备注..."
              maxlength="100"
              show-word-limit
            />
          </el-form-item>
        </el-form>
      </div>

      <!-- 操作确认 -->
      <div class="operation-confirmation">
        <el-alert
          :title="confirmationMessage"
          :type="confirmationType"
          :closable="false"
          show-icon
        />
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button
          :type="confirmButtonType"
          :loading="submitting"
          @click="handleConfirm"
        >
          确认{{ operationText }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, nextTick } from "vue";
import { type FormInstance, type FormRules } from "element-plus";
import {
  type CommentInfo,
  type BatchOperationType,
  CommentManagementUtils
} from "@/api/comment-management";

// Props
interface Props {
  visible: boolean;
  operationType: string;
  selectedComments: CommentInfo[];
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  operationType: "delete",
  selectedComments: () => []
});

// Emits
const emit = defineEmits<{
  "update:visible": [value: boolean];
  confirm: [params: any];
}>();

// 响应式数据
const dialogVisible = computed({
  get: () => props.visible,
  set: value => emit("update:visible", value)
});

const formRef = ref<FormInstance>();
const submitting = ref(false);

const operationForm = reactive({
  reason: "",
  sensitiveType: ""
});

// 表单验证规则
const formRules: FormRules = {
  sensitiveType: [
    { required: true, message: "请选择敏感词类型", trigger: "change" }
  ]
};

// 计算属性
const dialogTitle = computed(() => {
  return `批量${operationText.value}`;
});

const operationText = computed(() => {
  return CommentManagementUtils.getBatchOperationText(props.operationType);
});

const showBanOption = computed(() => {
  return ["mark_sensitive"].includes(props.operationType);
});

const confirmationMessage = computed(() => {
  const count = props.selectedComments.length;
  const operation = operationText.value;

  switch (props.operationType) {
    case "delete":
      return `确认要删除这 ${count} 条评论吗？删除后评论将不再显示。`;
    case "mark_sensitive":
      return `确认要标记这 ${count} 条评论为敏感内容吗？`;
    case "unmark_sensitive":
      return `确认要取消这 ${count} 条评论的敏感标记吗？`;
    default:
      return `确认要对这 ${count} 条评论执行${operation}操作吗？`;
  }
});

const confirmationType = computed(() => {
  switch (props.operationType) {
    case "unmark_sensitive":
      return "success";
    case "delete":
    case "mark_sensitive":
      return "warning";
    default:
      return "info";
  }
});

const confirmButtonType = computed(() => {
  switch (props.operationType) {
    case "unmark_sensitive":
      return "success";
    case "delete":
    case "mark_sensitive":
      return "danger";
    default:
      return "primary";
  }
});

// 监听操作类型变化，重置表单
watch(
  () => props.operationType,
  () => {
    resetForm();
  }
);

// 方法
const resetForm = () => {
  Object.assign(operationForm, {
    reason: "",
    sensitiveType: ""
  });
  nextTick(() => {
    formRef.value?.clearValidate();
  });
};

const handleConfirm = async () => {
  if (!formRef.value) return;

  try {
    await formRef.value.validate();

    const params = {
      ...operationForm
    };

    emit("confirm", params);
  } catch (error) {
    console.error("表单验证失败:", error);
  }
};

const handleClose = () => {
  dialogVisible.value = false;
  resetForm();
};

// 工具方法
const truncateContent = (content: string) => {
  return CommentManagementUtils.truncateContent(content, 30);
};

const getStatusText = (status: number) => {
  return CommentManagementUtils.getStatusText(status);
};

const getStatusTagType = (status: number) => {
  return CommentManagementUtils.getStatusTagType(status);
};
</script>

<style scoped lang="scss">
.batch-operation-dialog {
  .operation-overview {
    margin-bottom: 20px;
  }

  .selected-comments {
    margin-bottom: 20px;

    h4 {
      margin-bottom: 12px;
      color: #303133;
    }

    .comment-list {
      max-height: 200px;
      padding: 8px;
      overflow-y: auto;
      border: 1px solid #e4e7ed;
      border-radius: 4px;

      .comment-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px;
        border-bottom: 1px solid #f5f7fa;

        &:last-child {
          border-bottom: none;
        }

        .comment-info {
          display: flex;
          flex: 1;
          gap: 12px;
          font-size: 14px;

          .comment-id {
            font-family: monospace;
            color: #909399;
          }

          .comment-user {
            font-weight: 500;
            color: #606266;
          }

          .comment-content {
            flex: 1;
            color: #303133;
          }
        }
      }

      .more-comments {
        padding: 8px;
        font-size: 14px;
        color: #909399;
        text-align: center;
      }
    }
  }

  .operation-params {
    margin-bottom: 20px;

    .form-tip {
      margin-left: 8px;
      font-size: 12px;
      color: #909399;
    }

    .ban-duration-setting {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-top: 8px;
    }
  }

  .operation-confirmation {
    margin-bottom: 20px;
  }
}

.dialog-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
</style>
